<template>
  <div class="recommend">
      <div class="recommend-title">
          热销推荐
      </div>
      <div class="recommend-con">
          <ul>
              <router-link
                class="recommend-item"
                v-for="item of list"
                :key='item.id'
                tag='li'
                :to="'/detail/' + item.id"
              >
                <div class="recommend-con-img">
                    <img :src="item.imgUrl" alt="">
                </div>
                <div class="recommend-con-info">
                    <div class="recommend-addr">{{item.title}}</div>
                    <div class="recommend-summary">{{item.desc}}</div>
                    <button class="recommend-con-detail">查看详情</button>
                </div>
              </router-link>
          </ul>
      </div>
  </div>
</template>
<script>
export default{
  name: 'homeRecommend',
  props: {
    list: Array
  }
}
</script>
<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.recommend
    margin-top: .2rem
    .recommend-title
        height: .6rem
        line-height: .6rem
        text-indent: .2rem
        background-color: #ddd
    .recommend-con
        padding-left: .2rem
        .recommend-item
            padding: .1rem 0 .1rem 0
            border-bottom: 1px solid #ddd
            .recommend-con-img
                float: left
                width: 2rem
                height: 2rem
                img
                    width: 100%
            .recommend-con-info
                height: 2rem
                padding-left: .22rem
                overflow: hidden
                .recommend-addr
                    font-size: .38rem
                    height: .6rem
                    line-height: .6rem
                    padding-top: .2rem
                    ellipsis()
                .recommend-summary
                    font-size: .3rem
                    height: .4rem
                    line-height: .4rem
                    color: #212121
                    ellipsis()
                .recommend-con-detail
                    color: #fff
                    background-color: #ff9300
                    margin-top: .2rem
                    border-radius: .05rem
                    padding: 0 .1rem
</style>
